<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>管理后台</title>
    <link href="/static/layui/css/layui.css" rel="stylesheet">
    <script src="/static/layui/layui.js"></script>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
</head>

<body>
<!-- 你的 HTML 代码 -->
<div class="layui-bg-gray" style="padding: 16px;">
  <div class="layui-row layui-col-space15">
      <div class="layui-card">
        <div class="layui-card-header" style="font-size: 20px; font-weight: bold;" >Web服务器管理</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-xs4  layui-col-md1 layui-col-space1">
                    <div class="grid-demo grid-demo-bg1">
                        <table class="layui-hide" id="web-manage" lay-filter="TD-manage1"></table>
                    </div>
                </div>
            </div>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header" style="font-size: 20px; font-weight: bold;" >AD服务器管理</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <div class="layui-col-xs4  layui-col-md1 layui-col-space1">
                    <div class="grid-demo grid-demo-bg1">
                        {% if not msg %}
                             <!-- 添加/删除服务器  -->
                            <a href="/add_server"><button type="button" class="layui-btn">添加服务器</button></a>
                             </div></div></div></div></div></div></div>
                        {% else %}
                            <a href="/delete_server"> <button type="button" class="layui-btn">删除服务器</button></a>
                    </div>
                </div>
                <!-- 刷新服务器连接  -->
                <div class="layui-col-xs4  layui-col-md1 layui-col-space1">
                    <div class="grid-demo">
                        <a href="/refresh_ldap_conn"> <button type="button" class="layui-btn">刷新服务器连接</button></a>
                    </div>
                </div>
                <!-- 服务器信息  -->
            <table class="layui-hide" id="server-manage"></table>
        </div>
      </div>

      <div class="layui-card">
        <div class="layui-card-header" style="font-size: 20px; font-weight: bold;">批量导入</div>
        <div class="layui-card-body">
            <a href="/static/resources/批量导入模板.xlsx"><button type="button" class="layui-btn">点击下载模板</button></a>
            <div class="layui-upload-drag" style="display: block; width: 735px;" id="ID-upload-demo-drag" >
                <i class="layui-icon layui-icon-upload"></i>
                <div>点击上传，或将文件拖拽到此处</div>
                <div class="layui-hide" id="ID-upload-demo-preview">
                    <hr> <p>处理完毕</p>
                </div>
            </div>
        </div>
      </div>

  </div>
</div>
{% endif %}

{#上传文件弹出层#}
<div id="uploadDone" style="display: none"></div>
{#修改端口弹出层#}
<div id="changePort" class="changePort" style="display: none">
    <div class="layui-inline">
        <div class="layui-input-inline">
          <input type="text" id="port" name="port"  lay-verify="required" class="layui-input">
        </div>
    </div>
</div>

<!--表格列“操作”里的按钮 -->
<script type="text/html" id="barManage">
  <div class="layui-clear-space">
    <a class="layui-btn layui-btn-danger" lay-event="modify" id="del">修改</a>
  </div>
</script>
</body>

<!-- 服务器信息展示的表格 -->
<script>
layui.use('table', function(){
  var table = layui.table;
  // AD服务器信息展示
  table.render({
    elem: '#server-manage',
    url: '/get_server',
    method: 'POST',
    width: 800,
    cols: [[ //标题栏
      {field: 'host', title: '服务器地址',width: '40%' },
      {field: 'port', title: '端口',width: 84 },
      {field: 'username', title: '管理员账号', width: '25%'},
      {field: 'password', title: '管理员密码', width: '25%'},
    ],],
  });

  // web服务器的端口
  table.render({
    elem: '#web-manage',
    url: '/get_web',
    method: 'POST',
    id:'tableId',
    width: 800,
    cols: [[ //标题栏
      {field: 'port', title: '端口',width: 84 },
      {title: '操作', toolbar: '#barManage'} // toolbar在id="barManage"的script标签里引用
    ],],
  });

  // 修改web服务器端口
  table.on('tool(TD-manage1)', function () {
      layui.use(['util', 'layer'], function () {
          //实例化一个弹出层对象
          let layer = layui.layer;
          //展示弹出层
          layer.open({
            type: 1,    // 弹出层类型
            title: '修改端口',
            {#area: ['400px', '253px'],#}
            btn: ['确定', '取消'],
            shade: [0.5, '#00000'],
            shadeClose: true,
            content: $('#changePort'),
            btn1: function (layero, index) {
                $.ajax({
                    url: '/change_port',
                    type: 'post',
                    data: {port: $('#port').val(),},
                    success: function (res) {
                        if (res.code === 1) {
                            alert(res.msg);
                            layer.closeAll();
                            table.reloadData('tableId') // 重载表格数据
                        } else if (res.code === 2) {alert(res.msg)}
                    }
                })
            },
            end: function (layero, index) {
                document.getElementById("changePort").setAttribute('style', 'display: none');
            },
          })
      })
  })
});
</script>

<!-- 上传文件的拖拽框 -->
<script>
layui.use(function(){
  var upload = layui.upload;
  var $ = layui.$;
  // 渲染
  upload.render({
    elem: '#ID-upload-demo-drag',
    url: '/batch', // 此处用的是第三方的 http 请求演示，实际使用时改成您自己的上传接口即可。
    method: 'POST',
    accept:'file',  // 接受所有文件，默认参数为图片
    progress: function(obj){
        alert('后台处理中，请点击确定后耐心等待处理结果展示。');
    },
    done: function(res){
        {#alert(res.msg);#}
        layui.use('layer', function (){
            //实例化一个弹出层对象
            let layer = layui.layer;
            //展示弹出层
            layer.open({
                type: 1,    // 弹出层类型
                title: '批量导入结果',
                {#area: ['500px', '400px'],#}
                btn: ['确定','取消'],
                shade: [0.5,'#00000'],
                shadeClose:    true,
                content: $('#uploadDone'),
            })
        })
    }
  });
});
</script>
</html>